<script setup>
// toRefs
// 解决一个bug： 解构响应式对象后不响应的的情况
// toRefs(ref/reactive对象)


import { reactive, toRefs, ref } from 'vue';

// 定义一个响应式对象

// 1. reactive式响应式对象
// const person = reactive({
//   name: '张三',
//   age: 18
// })
// 修改person ok

// 解构响应式对象后不响应的的情况
// - 原本响应式， 结构了以后丢失响应式
// const { name, age } = person

// toRefs(ref)
// const { name, age } = toRefs(person)

// 2. 结构ref
const person = ref({
  name: '张三',
  age: 18
})
// const { name, age } = person.value //不生效
const { name, age } = toRefs(person.value) //ok
</script>
<template>
  <div style="border:10px solid #333">
    <h1 ref="h1Ref">当前组件</h1>
    <span>人： {{ person }} </span>
    <!-- <button @click="person.age += 1">年纪+1</button> -->
    <button @click="age += 1">年纪+1</button>
  </div>
</template>

